Upgrade Bootstrap 4 Alpha 6 to Beta
What’s New in Bootstrap 4 Beta
This article is the successor to my original “What’s New in Bootstrap 4”
On to Bootstrap 4 Beta!
It’s been 7 months since the release of Bootstrap 4 Alpha 6, and while we’ve all been anticipating the new beta?!, your old Alpha 6 code will need a few changes to make it Bootstrap 4 Beta friendly.
The easiest way is with a quick-n-dirty replace of the following classes in your alpha 6 markup…
- change
card-blocktocard-body - change
bg-fadedtobg-light - change
bg-inversetobg-dark - change
badge-defaulttobadge-dark - change
card-inversetotext-white - change
card-outline-*toborder-* - change
card-(color)tobg-(color) - change
navbar-toggleable-*tonavbar-expand-*(shift up 1 tier)
That will take care if the major changes from alpha 6 to beta! You’ll find that the beta is really all about the new utility classes which come in handy for just about everything.
Another change from alpha 6 to beta are the responsive visibility utilities. They’ve changed a lot during the alpha, and now the beta offers up a seemingly stable solution.
There’s the self-explanatory visible and invisible classes. The display utilities (d-none, d-inline, d-block, d-table, d-flex, etc..) are now responsive for varying display at different breakpoints. Some examples:
d-md-none(display:none on medium breakpoint)d-none(display:none on the default xs breakpoint)d-lg-block(display:block on large breakpoint)d-sm-flex(display:flex on small breakpoint)
To convert the old hidden-* classes to Bootstrap 4 Beta, you can do the following, and remember d-*-block can be swapped with the desired display class such as (d-*-inline, d-*-flex, etc..):
hidden-xs-downtod-none d-sm-blockhidden-sm-downtod-none d-md-blockhidden-md-downtod-none d-lg-blockhidden-lg-downtod-none d-xl-blockhidden-xs-uptod-nonehidden-sm-uptod-sm-nonehidden-md-uptod-md-nonehidden-lg-uptod-lg-nonehidden-xl-uptod-xl-none
Popper.js
You’ll also want to note that tether which was needed to tooltips and popovers in alpha 6, has been replaced with popper.js. In beta, dropdowns, tooltips and popovers require popper.js to be included in your scripts. Grab it over on CDN js: https://cdnjs.com/libraries/popper.js
Offsets & Column Order
If your alpha 6 code uses column offsets (offset-*-*) you’ll want to swap this with ml-auto (push to the right) auto margin utils. Similarly, the column ordering push, pull classes have been replaced with the flexbox ordering utils to replace the old push-* and pull-* classes.
The alpha flex ordering classes (flex-first, flex-last, flex-unordered, etc..) have been replaced with order-n where n is the numeric flexbox order (1–12). So, in alpha 6 we had this:
<div class="col-12">1</div>
<div class="col-sm-12 flex-first flex-sm-unordered">2 (1 xs)</div>Which in beta becomes this:
<div class="col-12 order-sm-1 order-2">1</div>
<div class="col-sm-12 order-1">2 (1 xs)</div>Of course, migrating any Bootstrap 3.x markup to Bootstrap 4 Beta is a larger undertaking, and for that try the upgrade tool, which will show you the list of changes from 3.x to 4.x beta. If I have time in the coming days I may offer up a alpha 6 to beta converter on the same site so keep an eye out for that. Meanwhile, here’s the ongoing list of swaps for your alpha 6 markup…
Alpha 6 to Beta Changes:
card-blocktocard-bodynavbar-toggleable-*tonavbar-expand-*(shift up 1 tier)navbar-inversetonavbar-darkbg-fadedtobg-lightbg-inversetobg-darkbadge-defaulttobadge-darkcard-inversetotext-whitecard-outline-*toborder-*card-infotobg-infocard-successtobg-successcard-warningtobg-warningcard-primarytobg-primarycard-dangertobg-dangerhidden-xs-downtod-none d-sm-blockhidden-sm-downtod-none d-md-blockhidden-md-downtod-none d-lg-blockhidden-lg-downtod-none d-xl-blockhidden-xs-uptod-nonehidden-sm-uptod-sm-nonehidden-md-uptod-md-nonehidden-lg-uptod-lg-nonehidden-xl-uptod-xl-none
What’s Next?
While you savor the new Beta, check out a growing collection of Bootstrap 4 articles & examples, or fiddle with the latest Bootstrap 4 at Codeply.
